@import './variables';

@mixin tab-bar-height {
  height: $tab-bar-height;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

@mixin no-wrap {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

@mixin line {
  width: 1rpx;
  background-color: $color-text-regular;
  height: 18rpx;
  margin: 0 8rpx;
  display: inline-block;
}

@mixin border-1px($color: $color-border-bottom, $radius: 2px, $style: solid) {
  position: relative;

  &::after {
    content: '';
    pointer-events: none;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    border-bottom: 1px $style $color;
    border-radius: $radius;
    box-sizing: border-box;
    width: 100%;
    height: 100%;

    @media (min-resolution: 2dppx) {
      width: 200%;
      height: 200%;
      border-radius: $radius * 2;
      transform: scale(0.5);
    }

    @media (min-resolution: 3dppx) {
      width: 300%;
      height: 300%;
      border-radius: $radius * 3;
      transform: scale(0.333);
    }
  }
}